<template>
  <maincontainer>
    <mycard>
      <n-form
        ref='formRef'
        :label-width='80'
        label-placement='left'
        :model='formValue'
      >
        <n-grid x-gap='12' :cols='4'>
          <n-gi>
            <n-form-item label='姓名:' path='name'>
              <n-input v-model:value='formValue.name' placeholder='输入姓名' />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label='姓名:' path='name'>
              <n-input v-model:value='formValue.name' placeholder='输入姓名' />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label='姓名:' path='name'>
              <n-input v-model:value='formValue.name' placeholder='输入姓名' />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-button @click='handleSearch'>查询</n-button>
            <n-button @click='handleResetForm'>重置</n-button>
            <n-button @click='handleCreate'>新建</n-button>
          </n-gi>
        </n-grid>
      </n-form>
    </mycard>
    <mycard class='flex-1 h-full'>
      <flextable :column='column' :tabledata='tableData' :loading='loading'></flextable>
    </mycard>
    <mycard class='w-full h-8 juzhong1'>
      <fenye :total='total' @change='gettabledatafunc' ref='fenyeref' class='juzhong1'></fenye>
    </mycard>
    <Edit ref='editref' @close='refreshdelete' />
    <menuEdit ref='menuEditref' @close='refreshdelete' />
  </maincontainer>
</template>

<script setup name='Positionmanager' lang='ts'>
import { useRoute } from 'vue-router'
import { NButton } from 'naive-ui'
import Edit from './modal.vue'
import { DefineComponent, h, inject, ref } from 'vue'
import { useListIndex } from '../../../hooks/useEdit'
import { useColumns } from '../../../hooks/useColumns'
import menuEdit from './menuModel.vue'

const menuEditref = ref<DefineComponent | null>(null)
const route = useRoute()
const {
  formRef, fenyeref, editref, formValue, tableData, total, handleSearch,
  handleResetForm, handleView, handleCreate, refreshdelete, http, message, loading,
} = useListIndex()

const handleEdit = (data: any) => {
  const newdata = { ...data }
  newdata.depart = data.depart ? data.depart.id : null
  newdata.master = data.master ? '1' : '0'
  editref.value.init('edit', newdata)
}

// 点击管理职位
const handleMneu = (data: any) => {
  menuEditref.value.init('edit',data)
}

// 点击删除
let delDialog: Function = inject('delDialog')
const handleDelete = (data: any) => {
  delDialog(refreshdelete, null, data.id, data.name)
}
const { index, createdTime, changeTime, desc, view, edit, del } = useColumns(handleView, handleEdit, handleDelete)
const column = ref([
  index,
  { title: '职位名称', key: 'name', show: true },
  {
    title: '所属部门', key: 'depart', show: true, render: (rowData: any) => {
      return rowData['depart'] ? rowData['depart'].name : ''
    },
  },
  {
    title: '是否是管理员', key: 'master', show: true, render: (rowData: any) => {
      return rowData['master'] ? '是' : '否'
    },
  },
  desc,
  createdTime, changeTime,
  {
    title: '管理菜单', key: '', show: true, width: 100, render: (rowData: any) => {
      return rowData['depart'] ? h(NButton, {
        onClick: () => {
          handleMneu && handleMneu(rowData)
        }, size: 'small', type: 'info',
      }, {
        default() {
          return '管理菜单'
        },
      }) : ''
    },
  },
  view, edit, del,
])

// 向后台获取数据
const gettabledatafunc = () => {
  http.positionlist({}, loading).then((res: any) => {
    if (res.data.code === 0) {
      tableData.value = res.data.items
      total.value = res.data.total
    } else {
      message.error(res.data.error.toString() || '获取数据失败')
    }
  }).catch((err) => {
    message.error(err || '获取数据失败')
  })
}


const zhucefunc: Function | undefined = inject('zhuceshuaxinfunc')
// 初始化函数
const init = () => {

}

// 初始化区域
init()
zhucefunc && zhucefunc({ [route.name!.toString()]: init })
</script>


<style scoped>
</style>
